<template>
  <div class="header">
    <div class="header-left">
      <span v-if="menuStore.activeRouteParent.meta?.title">{{ menuStore.activeRouteParent.meta.title }} /</span> <el-icon v-if="menuStore.activeRoute.path == '/index'"><HomeFilled /></el-icon>
      {{ menuStore.activeRoute.label == '首页' ? '' : menuStore.activeRoute.label }}
    </div>
    <!-- <div class="header-left">header-left</div> -->
    <div class="header-right">
      <el-popover popper-class="header-popover" placement="bottom" :width="200" trigger="hover" :disabled="userStore.userInfor.dwdmList?.length == 1">
        <ul class="change-unit">
          <li v-for="item in userStore.userInfor.dwdmList" :key="item.zddm" @click="changUnit(item)">{{ item.zdzw }}</li>
        </ul>
        <template #reference>
          <el-button type="primary" class="unit-name" :style="{ cursor: userStore.userInfor.dwdmList?.length == 1 ? 'default' : 'pointer' }" plain @click="visible = true">{{ userStore.userInfor.currentUnitMc }}</el-button>
        </template>
      </el-popover>
      <el-popover popper-class="header-popover" placement="bottom" :width="300" trigger="hover">
        <div class="user-info">
          <div class="info">
            <img class="large-avater" src="../assets/image/avater.jpeg" />
            <div class="post">
              <div>用户：{{ userStore.userInfor.name }}</div>
              <div>警号：{{ userStore.userInfor.policeNo }}</div>
              <div>岗位：{{ userStore.userInfor.post }}</div>
            </div>
          </div>
          <div class="handle">
            <el-button plain type="primary" class="logout" @click="changeTheme">切换主题</el-button>
            <el-button type="primary" class="logout" @click="logout">退出系统</el-button>
          </div>
        </div>

        <template #reference>
          <img class="avater" src="../assets/image/avater.jpeg" alt="" />
        </template>
      </el-popover>
    </div>
    <el-drawer v-model="drawer" title="请选择主题色" class="theme-drawer" direction="rtl">
      <ul class="color-list">
        <li v-for="color in themeColor" :key="color" class="flex-center" @click="setColor(color)" :style="{ backgroundColor: color, borderColor: color }">
          <el-icon v-if="activeColor == color"><Select /></el-icon>
        </li>
      </ul>
    </el-drawer>
  </div>
</template>

<script setup name="Header">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { stores } from '@/stores/index.js'
import { useRouter } from 'vue-router'
import { http } from '@/utils/index.js'
import { ElMessage, ElLoading } from 'element-plus'
const props = defineProps({
  activeRoute: {
    type: Object,
    default: () => {}
  },
  activeRouteParent: {
    type: Object,
    default: () => {}
  }
})
const router = useRouter()
const themeStore = stores.useThemeStore()
const menuStore = stores.useMenuStore()
const userStore = stores.useUserStore()
let loading = null
let timer = null
const visible = ref(false)
const cssVarValue = ref('')
//获取css 变量值
const getComputedCssVar = (element, varName) => {
  return getComputedStyle(element).getPropertyValue(varName).trim()
}
const activeColor = ref('#367fa9')
const themeColor = ['#367fa9', '#008080', '#fa541c', '#52c41a']
const drawer = ref(false)
onMounted(() => {
  const color = localStorage.getItem(userStore.userInfor.cardNumber + '_themeColor')
  if (color) {
    activeColor.value = color
  }
})
onBeforeUnmount(() => {
  clearTimeout(timer)
})
const changUnit = (unit) => {
  userStore.userInfor.dwdm = unit.zddm
  userStore.userInfor.dwdmzw = unit.zdzw
  visible.value = false
  loading = ElLoading.service({
    lock: true
    // background: 'rgba(0, 0, 0, 0.7)'
  })
  http('/znjszd3/ht/changeDwdm', 'get', {
    dwdm: unit.zddm
  }).then((res) => {
    if (res.status == 200) {
      loading.close()
      userStore.setToken(res.data.token)
      userStore.setUserInfor(res.data.sysLoginUser)
      ElMessage.success(res.message[0])
      timer = setTimeout(() => {
        router.go(0)
      }, 500)
    }
  })
}
const changeTheme = () => {
  drawer.value = true
}
//设置主题色
const setColor = (color) => {
  activeColor.value = color
  themeStore.setThemeColor(color)
}
const logout = () => {
  http('/znjszd3/ht/logout', 'get', {
    token: userStore.token
  }).then((res) => {
    if (res.status == 200) {
      userStore.clearUserInfor()
      router.push('/login')
    }
  })
}
</script>
<style lang="scss" scoped>
.header {
  height: 55px;
  padding: 0 30px 0 20px;
  display: flex;
  justify-content: space-between;

  box-sizing: border-box;
  background-color: var(--el-color-primary-light-2);
  color: #fff;

  .header-left {
    line-height: 55px;
    font-size: 18px;
  }
  .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .unit-name {
      position: relative;
      top: 1px;
      background-color: transparent;
      border-color: #fff;
      color: #fff;
      font-weight: 600;
    }
    .avater {
      margin-left: 30px;
      width: 35px;
      border-radius: 50%;
      vertical-align: middle;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.header-popover {
  max-height: 400px !important;
  overflow: auto;
  .user-info {
    .info {
      padding: 0 10px;
      height: 100px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .large-avater {
      height: 88%;
    }
    .post {
      height: 100%;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 16px;
    }

    .handle {
      text-align: center;
      .logout {
        margin-left: 40px;
      }
    }
  }
  li {
    margin-bottom: 5px;
    font-size: 16px;
    text-align: center;

    &:hover {
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }
  .icon-jingcha {
    font-size: 30px;
    color: #409eff;
  }
}
.theme-drawer {
  width: 15% !important;
  background-color: var(--el-color-primary-light-9) !important;
  el-drawer__header {
    margin-bottom: 15px;
  }
  .el-drawer__title {
    font-size: 20px;
  }

  .el-drawer__close {
    width: 1.5em;
  }
  ul {
    display: flex;
  }
  li {
    position: relative;

    margin: 10px 5px;
    width: 60px;
    height: 30px;

    border-radius: 4px;
    border-style: solid;
    border-width: 3px;
    cursor: pointer;
    .el-icon {
      color: #fff;
    }
  }
}
</style>
